<template>
  <el-dialog v-loading="loadingDialog" :title="formTitle" :visible.sync="isShow" width="1000px" center
    :destroy-on-close="true" :close-on-click-modal="false" :append-to-body="true">
    <el-row style="border-bottom: 1px solid #e5e5e5;padding-bottom: 20px;margin: 5px;">
      <el-col>
        <el-form ref="queryForm" :model="queryParams" size="medium" :inline="true" label-width="68px"
          style="margin: auto;width: 417px;">
          <el-form-item label="" prop="planName">
            <el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable style="width: 240px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form>
        <div v-if="selectedList.length" class="checkedItem">
          <el-tooltip class="item" effect="dark" :content="selectedList[0][showField]" placement="top-start">
            <p v-if="selectedList[0].length > 10" style="padding: 5px;">
              {{ selectedList[0][showField].slice(0, 10) + '...' }}
              <i class="el-icon el-icon-close" @click="tagClose()" />
            </p>
            <p v-else style="padding: 5px;">
              {{ selectedList[0][showField] }}
              <i class="el-icon el-icon-close" @click="tagClose()" />
            </p>
          </el-tooltip>
        </div>
        <vxe-table ref="tableRef" :data="tableData" class="mt10"
          :checkbox-config="{ checkField: 'checked', trigger: 'row' }" @checkbox-change="handleSelect"
          @checkbox-all="handleSelectAll">
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column type="seq" :width="50" title="序号" align="center" />
          <vxe-column v-for="(item, index) in tableKeys" :key="index" :field="item.key" :title="item.title"
            :min-width="item.width" :sortable="item.sortable" show-overflow align="center">
            <template #default="{ row }">
              <dict-tag v-if="item.dict !== undefined" :options="propDicts[item.dict]"
                :value="matchDicts(item.dict, row[item.key])" />
              <span v-else>
                {{ row[item.key] }}
              </span>
            </template>
          </vxe-column>
        </vxe-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button type="primary" @click="selectConfirm()">确 定</el-button>
      <el-button @click="selectCancel()">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listBusinessObject } from "@/api/interfaceConfig/businessObject/businessObject.js";
export default {
  name: "SelectColumnDialog",
  props: {
    andsysPlatform: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '120px'
    },
    formTitle: {
      type: String,
      default: ''
    },
    primaryKey: {
      type: String,
      default: 'id'
    },
    show: {
      type: Boolean,
      default: false // 是否弹出弹出框
    },
    // businessObjectId: {
    //   type: Number,
    //   required: true
    // },
    id: {
      type: Number,
      required: true
    },
    showField: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      tableKeys: [
        {
          key: 'businessObjectName',
          title: '业务对象名称'
        },
        {
          key: 'businessObjectFlag',
          title: '业务对象标识'
        },
      ],
      tableData: [],
      queryParams: {
        keyWord: '',
        pageNum: 1,
        pageSize: 10,
        businessId: undefined,
      },
      total: 0,
      loadingDialog: false,
      selectedList: [],
      tempSelectedList: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  created() {
    //根据系统2的对象查询数据
    this.queryParams.sysPlatform = this.andsysPlatform
    this.getList()
  },
  methods: {
    async handleQuery() {
      this.queryParams.pageNum = 1
      await this.getList()
    },
    async getList() {
      this.loadingDialog = true
      await listBusinessObject(this.queryParams).then(resp => {
        this.tableData = resp.rows;
        this.total = resp.total;
        this.loadingDialog = false;
      })
    },
    // 重置弹框对应的表单
    resetQuery() {
      this.queryParams = {
        keyWord: '',
        pageNum: 1,
        pageSize: 10,
        businessId: this.andsysPlatform
      }
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 单选
    handleSelect({ row, checked }) {
      console.log(row)
      this.selectedList = []
      this.tempSelectedList = [row]
      let isSelect = this.$refs.tableRef.isCheckedByCheckboxRow(row)
      this.$refs.tableRef.setAllCheckboxRow(false)
      if (checked) {
        this.selectedList.push(row)
        this.$refs.tableRef.setCheckboxRow(row, isSelect)
      }
      this.multiple = !this.selectedList.length
    },
    // 全选
    handleSelectAll({ records, checked }) {
      this.$refs.tableRef.setAllCheckboxRow(false)
      this.$modal.msgWarning('无法选择所有')
    },
    selectCancel() {
      this.$emit('closeSelectColumn')
    },
    tagClose() {
      this.selectedList = []
      this.$refs.tableRef.setAllCheckboxRow(false)
    },
    selectConfirm() {
      if (this.selectedList.length === 0) {
        return this.$modal.msgWarning(`未选择${this.label}无法进行进行确认操作!`)
      }
      this.$emit('selectDialogItem', this.id, this.selectedList[0])
      this.$nextTick(() => {
        this.isShow = false
      })
    }
  }
}
</script>

<style scoped>
.custom-form-item {
  display: inline-block;
}

.showIcon :hover .iconShow {
  display: block;
}

.iconShow {
  display: none;
}

.iconHidden {
  display: none;
}

.checkedItem {
  height: 100%;
  overflow: auto;
  position: absolute;
  display: inline-block;
  top: 25px;
  z-index: 100;
}

.checkedItem>.item {
  height: 30px;
  text-align: left;
  list-style: none;
  margin: 1px auto;
  display: inline-block;
  background-color: rgba(238, 243, 247, 1);
}

.checkedItem>.item>p>i {
  margin-top: 2px;
  float: right;
  cursor: pointer;
}
</style>
